<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: '100%';
            height: '100%';
            background-color: #333;
        }

        .container {
            display: flex;
            flex-direction: column;
        }

        .user-pane {
            background-color: transparent;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed; /* 固定在底部 */
            top: 300px;
            width: 100%;
            opacity: 0.5;
            z-index: 5;
        }

        .title-pane {
            position: absolute;
            position: fixed; /* 固定在底部 */
            top: 0;
            margin-top: 50px;
            z-index: 5;
        }

        .title-pane span {
            display: inline-block;
            margin-right: 80px; /* 可选：添加间距 */
        }

        .accept-pane {
            background-color: transparent;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed; /* 固定在底部 */
            width: 100%;
            bottom: 0;
            margin-bottom: 250px;
            opacity: 0.5;
        }

        .accept-pane span {
            display: inline-block;
            margin-right: 30px;
            margin-left: 30px;
        }

        .video-pane {
            width: '100%';
            height: '100%';
        }

        .control-pane {
            position: absolute;
            background-color: transparent;
            opacity: 0.5;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed; /* 固定在底部 */
            width: 100%;
            bottom: 0;
            margin-bottom: 80px;
            z-index: 5;
        }

        .horizontal-spans span {
            display: inline-block;
            margin-right: 20px; /* 可选：添加间距 */
            margin-left: 20px; /* 可选：添加间距 */
        }

        .horizontal-spans span img {
            width: 40px; /* 图片的宽度 */
            height: 40px; /* 图片的高度 */
            border-radius: 50%; /* 创建圆形 */
            overflow: hidden; /* 隐藏超出圆形的部分 */
            clip-path: circle(50%);
            padding: 10px;
        }
    </style>

    <script type="text/javascript">
        let audioValue = true;
        let videoValue = false;
        let volumeValue = false;
        let screenSmallValue = false;
        let isAudio = false;

        window.onload = function() {
            let str = "a,b,c";
            let strs = str.indexOf(",") > -1 ? str.split(",") : [str];
            let userIds = [];
            console.info("userIds: ", strs);
            for (let v of strs) {
                userIds.push(unescape(v));
            }
            console.info("userIds: ", userIds, userIds[0]);
            let tt = "%E5%88%98%E5%A4%87";
            let ttt1 = decodeURIComponent(tt);
            console.info("userIds: ", ttt1);

            if(isAudio) {
                hide('videoSpan');
                show('volumeSpan');
            } else {
                show('videoSpan');
                hide('volumeSpan');
            }
        }

        function accept() {

        }

        function reject() {

        }

        function switchAudio() {
            let audioImg = document.getElementById("audioImg");
            audioValue = !audioValue;
            if (audioValue) {
                audioImg.src = "/resource/webrtc-img/audio.svg";
                document.getElementById("audioTip").innerHTML = '麦克风已开';
            } else {
                audioImg.src = "/resource/webrtc-img/audio_close.svg";
                document.getElementById("audioTip").innerHTML = '麦克风已关';
            }
            // todo

        }

        function switchVideo() {
            let videoImg = document.getElementById("videoImg");
            videoValue = !videoValue;
            if (videoValue) {
                videoImg.src = "/resource/webrtc-img/camera.svg";
                document.getElementById("videoTip").innerHTML = '摄像头已开';
            } else {
                videoImg.src = "/resource/webrtc-img/camera_close.svg";
                document.getElementById("videoTip").innerHTML = '摄像头已关';
            }
            // todo
        }

        // 切换是否开启扬声器
        function switchVolume() {
            let volumeImg = document.getElementById("volumeImg");
            volumeValue = !volumeValue;
            if (volumeValue) {
                volumeImg.src = "/resource/webrtc-img/camera.svg";
                document.getElementById("volumeTip").innerHTML = '扬声器已开';
            } else {
                volumeImg.src = "/resource/webrtc-img/camera_close.svg";
                document.getElementById("volumeTip").innerHTML = '扬声器已关';
            }
        }

        function closeMedia() {
            // todo
        }

        function switchScreenSmall() {
            screenSmallValue = !screenSmallValue;
            if (screenSmallValue) {
                hide("titlePane");
                hide('userPane');
                hide("acceptPane");
                hide("controlPane");
                // document.documentElement.style.setProperty("background-color", "rgba(0, 0, 0, 1)");
                document.documentElement.style.width = "330px";
                document.documentElement.style.height = "450px";
                window.resizeTo("330px", "450px");
                smallVideo();
            } else {
                show("titlePane");
                show("userPane");
                show("acceptPane");
                show("controlPane");
                // document.documentElement.style.setProperty("background-color", "rgba(0, 0, 0, 1)");
                document.documentElement.style.width = "100%";
                document.documentElement.style.height = "100%";
                window.resizeTo("100%", "100%");
                noSmallVideo();
            }
        }

        function hide(nodeId) {
            let node = document.getElementById(nodeId);
            node.style.display = "none";
        }

        function show(nodeId) {
            let node = document.getElementById(nodeId);
            node.style.display = '';
        }

        function smallVideo() {
            let videoPane = document.getElementById("videoPane");
            videoPane.style.width = "130px";
            videoPane.style.height = '162.5px';

            let video = document.getElementById("video");
            video.style.width = "130px";
            video.style.height = '162.5px';
        }

        function noSmallVideo() {
            let videoPane = document.getElementById("videoPane");
            videoPane.style.width = "100%";
            videoPane.style.height = '100%';

            let video = document.getElementById("video");
            video.style.width = "100%";
            video.style.height = '100%';
        }

    </script>
</head>
<body>

<div class="container">
    <div id="videoPane" class="video-pane" onclick="switchScreenSmall()">
        <video id="video" width="100%" height="100%" autoplay="autoplay" controls ></video>
    </div>

    <div class="title-pane horizontal-spans" id="titlePane">
        <span style="margin-left: 60px" onclick="switchScreenSmall()">
            <img src="/resource/webrtc-img/screen_small.svg" style="background-color: white">
        </span>
    </div>

    <div class="user-pane horizontal-spans" id="userPane">
        <span style="background-color: red">
            <h1 style="color: white">sadfafdadfasfasfa</h1>
        </span>
    </div>

    <div class="accept-pane horizontal-spans" id="acceptPane">
        <span onclick="accept()">
            <img id="acceptImg" src="/resource/webrtc-img/calling.svg" style="background-color: green">
            <p id="acceptTip">接受</p>
        </span>
        <span onclick="reject()">
            <img id="rejectImg" src="/resource/webrtc-img/close.svg" style="background-color: red">
            <p id="rejectTip">拒绝</p>
        </span>
    </div>

    <div class='control-pane horizontal-spans' id="controlPane">
        <span onclick="switchAudio()">
            <img id="audioImg" src="/resource/webrtc-img/audio.svg" style="background-color: white">
            <h4 id="audioTip">麦克风已开</h4>
        </span>

        <span onclick="closeMedia()">
            <img src="/resource/webrtc-img/speaker.svg" style="background-color: red">
            <h4>挂断</h4>
        </span>

        <span onclick="switchVideo()" id="videoSpan">
            <img id="videoImg" src="/resource/webrtc-img/camera.svg" style="background-color: black; fill: white">
            <h4 id="videoTip">摄像头已开</h4>
        </span>

        <span onclick="switchVolume()" id="volumeSpan">
            <img id="volumeImg" src="/resource/webrtc-img/volume_close.svg" style="background-color: black; fill: white">
            <p id="volumeTip">扬声器已关</p>
        </span>
    </div>
</div>


</body>
</html>